<template>
  <div id="alls">
      <div class="alls">
          
          <ul>
              <template v-for="item in liu">
                  <li :key="item.id" @click="btt(item.id)">
                  <p>收货人：{{item.name}}</p>
                  <p>联系电话：{{item.phone}}</p>
                  <p>收货地址：{{item.area}}</p>
                  <span>详细地址：{{item.area_name}}</span>
                 </li>
              </template>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
    data:()=>{
      return{
          liu:[]
      }
    },
  created(){
      this._axios.get(`/api/address`).then((res)=>{
          this.liu=res.data.result
        //   console.log(this.liu);
      })
  },
  methods:{
      btt(id){
      this.$router.push({path:'/shopping',query:{id}})
  }
  }
}
</script>

<style lang='scss' scoped>
#alls{
    width: 1226px;
    margin: 0 auto;
    .alls{
        ul{
            display: flex;
            flex-wrap: wrap;
            li{
                margin-top: 20px;
                width: 220px;
                border: 1px solid #c1c1c1c1;
                padding: 10px;
                margin-left: 10px;
                cursor: pointer;
                
                &:hover{
                  box-shadow: -2px 0 20px 2px;
                  transition: .3s all;
                }
            }
        }
    }
}
</style>